<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <div class="tit">
          <h2><h2>{{dataForm.managerId?'编辑商户管理员':'新增商户管理员'}}</h2></h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回</el-button
          >
        </div>
        <el-form
          :model="dataForm"
          ref="dataForm"
          label-width="200px"
          :rules="rules"
          :validate-on-rule-change="false"
        >
          <el-row>
            <el-form-item label="管理员等级" prop="managerLevels">
              <el-select v-model="dataForm.managerLevels" clearable filterable>
                <el-option v-for="item in levelsList" :value="item.value" :label="item.label" :key="item.value">

                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户名" v-if="dataForm.managerId">
                <el-input v-model="dataForm.userName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="dataForm.nickName" placeholder="建议格式：商户昵称-姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input type="number" v-model="dataForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="fullName">
              <el-input
                v-model="dataForm.fullName"
                :clearable="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="dataForm.sex">
                <el-radio :label="1">
                  男
                </el-radio>
                <el-radio :label="2">
                  女
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="部门" prop="departIds">
              <el-cascader v-model="dataForm.departIds" :options="departList" :props="{value:'departId',label:'departName',checkStrictly:true,multiple:true}" filterable></el-cascader>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input type="textarea" v-model="dataForm.remark" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item style="width: 1000px;" v-if="!dataForm.managerId">
              <span style="color: red;">说明：新增时，登录账号会自动生成，生成规则：登录账号=手机号，昵称建议格式：商户昵称+“-”+姓名</span>
            </el-form-item>

          </el-row>
          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureAddClick"
                >保 存</el-button
              >
              <el-button @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
  </template>

  <script>
  import ManagerBusinessApi  from "@/api/business/manager";
  import BusinessDepartApi from "../../api/business/depart";
  import * as message from "@/constants/message";
  export default {
    data() {
      return {
        dataForm: {
          managerId:"",
          userName:"",
          nickName:"",
          managerLevels:"",
          sex:1,
          phone:"",
          fullName:"",
          departIds:[],
          remark:"",
        },
        levelsList:[
          {value:1,label:"部门"},
          {value:2,label:"组"},
          {value:3,label:"岗位"},
        ],
        departList:[],
        rules: {
          managerLevels:[
            {required:true,message:"请选择管理员等级"}
          ],
          fullName:[
            {required:true,message:"请输入姓名"}
          ],
          sex:[
            {required:true,message:"请选择性别"}
          ],
          phone:[
            {required:true,message:"请输入电话号码",trigger:'blur'},
            { pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: "电话号码格式错误",trigger:'blur'}
          ],
          departIds:[
            {required:true,message:"请选择部门号码"},
          ]
        },
      };
    },
    mounted() {
      this.init()
    },
    watch:{
    },
    methods: {
      init(){
          if(this.$route.query.id){
              this.dataForm.managerId = this.$route.query.id
              this.getData();
              this.levelsList.push({value:0,label:"商户"},)
          }else{
            this.getDepartList()
          }

          if(this.$store.getters.userRole==3){
            this.levelsList = this.levelsList.filter(item=>item.value>this.$store.getters.detailRole)
          }
      },
      getData(){
          ManagerBusinessApi.getManagerInfo({id:this.dataForm.managerId})
          .then(res => {
            this.$Utils.bindingBean(this.dataForm, res.data);
            this.getDepartList()
          })
      },
      getDepartList(){
          BusinessDepartApi.listMangerTree().then(res=>{
            this.setDisabled(res.data)
            this.departList = res.data
            this.getDepartIds()
          })
      },
      // 设置哪些是不可选的
      setDisabled(list,flag = false){
          list.forEach(item=>{
            if(!item.power||!flag){
              item.disabled = true
            }
            if(item.children){
              this.setDisabled(item.children,true)
            }

          })
      },
      // 获取cascader所需的departIds数组
      getDepartIds(){
        const departIds = []
        this.dataForm.departIds.forEach(item=>{
          const val = this.$Utils.filterTreeToArr(this.departList,{departId:item},'departId').map(item=>item.departId)
          departIds.push(val)
        })
        this.dataForm.departIds = departIds
      },
      handleAgeInput(val){
        const reg = /^([1-9][0-9]?|100)$/
        if(!reg.test(val)){
          this.$message.error("年龄只能1-100之间")
          this.dataForm.age = ""
        }
      },
      sureAddClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(
              message.MSG_CONFIRM_SAVE,
              message.TITLE_PROMPT,
              {}
            ).then(() => {
              if (this.dataForm.managerId) {
                this.editData();
              } else {
                this.addData();
              }
            });
          }
        });
      },
      addData() {
        let data = {
          phone: this.dataForm.phone,
          nickName:this.dataForm.nickName,
          managerLevels: this.dataForm.managerLevels,
          fullName: this.dataForm.fullName,
          sex: this.dataForm.sex,
          departIds:this.dataForm.departIds.map(item=>item.at(-1)),
          remark:this.dataForm.remark
      };
      ManagerBusinessApi.addManager(data).then(data => {
          this.$Utils.notifySuccess();
          this.returnList();
        });
      },
      editData() {
          let data = {
            managerId:this.dataForm.managerId,
            nickName:this.dataForm.nickName,
            phone: this.dataForm.phone,
            managerLevels: this.dataForm.managerLevels,
            fullName: this.dataForm.fullName,
            sex: this.dataForm.sex,
            departIds:this.dataForm.departIds.map(item=>item.at(-1)),
            remark:this.dataForm.remark
          };
          ManagerBusinessApi.editManager(data)
            .then(res => {
              this.$Utils.notifySuccess()
              this.returnList()
            })
        },
      returnList() {
        this.$store.dispatch("delView", this.$route);
        this.$router.back()
      }

    }
  };
  </script>
  <style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
